var loopId = 0;
var total = 2;
var current = 1;
var start = 1;
var timeStep = 5;
$(function () {
  test();
  $('.pages').width(total*1170);
  timeStep = timeStep || 5;
  GenerPageLoop(timeStep);
  SetPageNum(current,total);
  GenerPageClick();
});
function GenerPageLoop(time) {
  //The unit of time is seconds
  time = time || 5;
  time = time * 1000;
  loopId = setInterval(PageLoopFunc,time);
}
function PageLoopFunc() {
  // console.log('PageLoopFunc');
  // console.log(loopId);
  $('.page-tool .btn.page-next').trigger('click');
}
function GenerPageClick() {
  $('.page-tool .btn').click(function () {
    // console.log($(this).hasClass('page-next'));
    clearInterval(loopId);
    loopId = 0;
    SetPageByNum($(this));
    GenerPageLoop(timeStep);
  });
}
function SetPageByNum(e) {
  var marginLeft  = 0;
  if(e.hasClass('page-next')){
    if(current<total){
      current += 1;
    }else {
      current = start;
    }
  }else if(e.hasClass('page-prev')){
    if(current > start){
      current -= 1;
    }else {
      current = total;
    }
  }else {
  }
  marginLeft = (current -1) * -1170;
  SetPageNum(current,total);
  $('.pages').stop(true,true);
  $('.pages').animate({marginLeft:marginLeft+'px'},500,'swing',undefined);
}

function SetPageNum(current,total) {
  current = current || 1;
  total = total || 1;
  $('.page-num-now').html(current);
  $('.page-num-total').html(total);
}
function test() {
  var html ='';
  html += '';
  html += '<div class="page " data-page="1">';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_01.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="clear"></div>';
  html += '';
  html += '</div>';
  html += '<div class="page " data-page="2">';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_02.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="clear"></div>';
  html += '';
  html += '</div>';
  html += '<div class="page " data-page="3">';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="practice-item padding-x-15 padding-y-15">';
  html += '		<div class="practice">';
  html += '			<div class="practice-cover" style="background-image: url(\'./news/img/teacher/cover/class_cover_03.jpg\');" ></div>';
  html += '			<div class="practice-info padding-10">';
  html += '				<div class="practice-name">(广理工1602班)小姐姐带你学自动化</div>';
  html += '				<div class="practice-stat">';
  html += '					<div class="practice-leanner-num"><i class="fa fa-user"></i>&nbsp;&nbsp;32</div>';
  html += '					<div class="practice-created-date">2018-02-15</div>';
  html += '				</div>';
  html += '			</div>';
  html += '		</div>';
  html += '	</div>';
  html += '	<div class="clear"></div>';
  html += '';
  html += '</div>';
  html += '';
  html += '<div class="clear"></div>';
  $('.pages').html(html);

}
